<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件生命周期(旧)</title>
</head>
<body>

<div id="life"></div>

<script src="js/react.development.js" crossorigin></script>
<script src="js/react-dom.development.js" crossorigin></script>
<script src="js/babel.js"></script>
<script type="text/babel">
    class Life extends React.Component {

        constructor(props) {
            console.log('[Current sum] constructor 构造器调用');
            super(props);
            this.state = {count: 0}
        }

        sum = () => {
            let {count} = this.state;
            count += 1;
            this.setState({count})
        }

        deleteComponent = () => {
            // 卸载组件
            ReactDOM.unmountComponentAtNode(document.getElementById('life'))
        }

        forciblyUpdate = () => {
            // 强制更新
            this.forceUpdate();
        }

        componentWillMount() {
            console.log('[Current sum] componentWillMount 组件将要挂载调用');
        }

        componentDidMount() {
            console.log('[Current sum] componentDidMount 组件完成挂载调用');
        }

        componentWillUnmount() {
            console.log('[Current sum] componentWillUnmount 卸载组件调用');
        }

        shouldComponentUpdate() {
            console.log('[Current sum] shouldComponentUpdate 应用组件更新策略');
            // true 才会继续向下走
            return true;
        }

        componentWillUpdate() {
            console.log('[Current sum] componentWillUpdate 组件将要更新');
        }

        componentDidUpdate() {
            console.log('[Current sum] componentDidUpdate 组件更新完成');
        }

        render() {
            console.log('[Current sum] render 组件挂载调用');
            let {count} = this.state;
            return (
                <div>
                    <h2> Current sum : {count}</h2>
                    <button onClick={this.sum}> onClick +1</button>
                    <button onClick={this.deleteComponent}> delete Component</button>
                    <button onClick={this.forciblyUpdate}>forcibly Update</button>
                </div>
            )
        }
    }

    class One extends React.Component{
        state = {other:'no'}

        onClick = ()=>{
            this.setState({other: this.state.other += '1'})
        }

        render(){
            return (
                <div>
                    <h4> This is ONE Component</h4>
                    <button onClick={this.onClick}> onClick</button>
                    <Two other={this.state.other}/>
                </div>
            )
        }
    }

    class Two extends React.Component{
        componentWillReceiveProps(props){
            console.log('[Two] componentWillReceiveProps 接收父组件props调用(初始化调用)',props);
        }
        render(){
            return (
                <div>
                    <h4> This is TWO Component</h4>
                    <h5> from ONE Component value: {this.props.other}</h5>
                </div>
            )
        }
    }

    // ReactDOM.render(<Life/>, document.getElementById('life'))
    ReactDOM.render(<One/>, document.getElementById('life'))
</script>
</body>
</html>